import { observable, action, computed } from 'mobx';
import { Pages } from 'stores/models/core/nodeWithList';
import * as CONST from 'common/const';
import CONFIG from 'common/const/observer/slider';
import SliderPage from 'modules/slider/components/sliderPage/model';
import { stringExtendStyle } from 'common/utils/style';

/**
 * Slider
 */
export default class Slider extends Pages {
  @observable initialSlide = 0; // 设定初始化时slide的索引

  constructor(props) {
    super(props);

    this.init({
      props: {
        icon: 'icon-carousel',
        type: 'slider',
        label: '轮播',
        isRoot: false,
      }
    });

    // 扩展可设置的属性
    let observableProps = {};
    CONFIG.forEach(item => {
      observableProps[item.key] = item.val;
    });
    this.init({
      observableProps,
    });

    // 添加默认页面 // todo 灌装数据
    this.addDefaultPage();
  }

  @computed get style() {
    return {
      width: this.width,
      height: this.height,
      left: this.left,
      top: this.top,
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: this.rotate
        },
      ]),
    };
  }

  @action setHeight(val) {
    val = val < CONST.SLIDER_MIN_HEIGHT ? CONST.SLIDER_MIN_HEIGHT : val;
    this.update('height', val);
  }
  @action setWidth(val) {
    val = val > CONST.PAGE_WIDTH ? CONST.PAGE_WIDTH : val;
    this.update('width', val);
  }

  // 新建页面
  @action addPage(fromIndex = -1) {
    const page = new SliderPage({ parent: this });
    this.insert(page, fromIndex);
  }

  @action addDefaultPage() {
    this.addPage();
    this.unSelect();
  }
}
